<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米导航条</title>

        <style type="text/css">
            .wrapper {
                position: relative ; /* 为了让子元素能够相对于自己进行定位 */
                height: 460px ;
                width: 1226px ;
                margin: 25px auto ;
                border: 1px solid red ;
                background: url(redmi-max.webp) no-repeat center ;
            }

            .wrapper>div { 
                width: 234px ; 
                height: 460px ; 
                border: 1px solid transparent ;
                background: rgba( 105 , 101 , 101 , 0.6 ) ; 
            }

            .category>dt{ 
                width: 234px ; 
            }

            .category>dt a { 
                display: block ;
                width: 184px ; 
                height: 42px ; 
                line-height: 42px ;
                color: #fff ;
                text-decoration: none ;  
                padding: 0 25px ;
            }

            .category>dt a:hover {
                background: rgb(255, 136, 0) ;
            }

            .category>dd {
                position: absolute ;
                left: 234px ;
                top: 0;
                width: 992px ;
                height: 460px ;
                background: #fff ;
                margin-left: 0 ;
                display: none ;
            }

            .category dt:hover+dd {
                display: block ;
            }
        </style>

    </head>
    <body>

        <div class="wrapper">
            <div>
                <dl class="category">
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                    <dt> <a href="">手机电话卡</a> </dt>
                    <dd></dd>
                </dl>
            </div>
        </div>
        
    </body>
</html>